<template>
  <div class="login-container">
    <div class="login-form">
      <h2>用户登录</h2>
      <form @submit.prevent="handleLogin">
        <div class="form-group">
          <label for="username">用户名:</label>
          <input 
            type="text" 
            id="username" 
            v-model="loginForm.username" 
            required 
            placeholder="请输入用户名"
          />
        </div>
        
        <div class="form-group">
          <label for="password">密码:</label>
          <input 
            type="password" 
            id="password" 
            v-model="loginForm.password" 
            required 
            placeholder="请输入密码"
          />
        </div>
        
        <div class="form-options">
          <label>
            <input type="checkbox" v-model="rememberMe" /> 记住我
          </label>
          <!-- <a href="#" class="forgot-password">忘记密码?</a> -->
        </div>
        
        <button type="submit" class="login-button">登录</button>
      </form>
      
      <div class="login-footer">
        <!-- <p>还没有账户? <a href="#">立即注册</a></p> -->
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

// 表单数据
const loginForm = ref({
  username: '',
  password: ''
})

// 记住我
const rememberMe = ref(false)

// 路由
const router = useRouter()

// 处理登录
// 修改handleLogin函数
const handleLogin = () => {
  // 验证账号密码（默认账号密码为admin 123456）
  if (loginForm.value.username === 'admin' && loginForm.value.password === '123456') {
    // 登录成功，保存登录状态到localStorage
    localStorage.setItem('userLoggedIn', 'true')
    localStorage.setItem('username', loginForm.value.username)
    
    // 显示成功消息
    ElMessage.success(`欢迎, ${loginForm.value.username}! 登录成功。`)
    
    // 检查是否有重定向路径，如果有则跳转到重定向路径，否则跳转到首页
    const redirectPath = new URLSearchParams(window.location.search).get('redirect') || '/'
    router.push(redirectPath)
  } else {
    // 登录失败，显示错误提示
    ElMessage.error('用户名或密码错误！')
  }
}
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
}

.login-form {
  background: white;
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 400px;
}

.login-form h2 {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  color: #555;
  font-weight: 500;
}

.form-group input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 16px;
  box-sizing: border-box;
  transition: border-color 0.3s;
}

.form-group input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  font-size: 14px;
}

.form-options label {
  display: flex;
  align-items: center;
  color: #555;
  font-weight: normal;
}

.form-options input {
  margin-right: 8px;
  width: auto;
}

.forgot-password {
  color: #667eea;
  text-decoration: none;
  transition: color 0.3s;
}

.forgot-password:hover {
  color: #764ba2;
  text-decoration: underline;
}

.login-button {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.login-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.login-button:active {
  transform: translateY(0);
}

.login-footer {
  text-align: center;
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid #eee;
  color: #666;
}

.login-footer a {
  color: #667eea;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s;
}

.login-footer a:hover {
  color: #764ba2;
  text-decoration: underline;
}

@media (max-width: 480px) {
  .login-form {
    padding: 30px 20px;
  }
  
  .form-options {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
}
</style>